import React from 'react';
import type { IBubbleButton } from '@/components/CustomElement/BubbleButton/interface';
import { Button, Dropdown } from 'antd';
import { EllipsisOutlined, MoreOutlined } from '@ant-design/icons';
// 浮窗menu button
export const BubbleButton: React.FC<IBubbleButton> = (props) => {
    const {
        iconDirection = 'transverse',
        buttons,
        children,
        type = 'link',
        direction = 'bottomLeft',
        ...rest
    } = props;

    const renderChildren = () => {
        return (
            <Button type={type}>{iconDirection ? <EllipsisOutlined /> : <MoreOutlined />}</Button>
        );
    };

    return (
        <Dropdown overlay={buttons} placement={direction} {...rest}>
            {children || renderChildren()}
        </Dropdown>
    );
};
